<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>连锁干洗中心业务管理系统</title>
    <%- include('css') %>
</head>

<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <%- include('header') %>
    <%- include('menu') %>


    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div>
            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                <legend>干洗中心人员管理</legend>
            </fieldset>

            <form name="form1" class="layui-form" action="">

                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">搜索</label>
                        <div class="layui-input-inline" style="width: 250px;">
                            <input type="text" id="search" name="search" placeholder="员工姓名" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">所属中心</label>
                        <div class="layui-input-inline">
                            <select name="center" id="center" lay-filter="center">
                                <option value="">全部</option>
                            </select>
                        </div>
                    </div>
                </div>

                <table class="layui-hide" id="tablediv" lay-filter="tablediv"></table>
            </form>

            <script type="text/html" id="toolbar">
                <div class="layui-btn-container">

                    <button class="layui-btn layui-btn-normal layui-btn-sm" lay-submit="" lay-filter="search">查询数据</button>
                    <button type="button" class="layui-btn layui-btn-sm" lay-event="tonew">新增</button>
                </div>
            </script>

            <script type="text/html" id="opdiv">
                <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                <a class="layui-btn layui-btn-xs" lay-event="view">查看</a>
                <a class="layui-btn layui-btn-xs" lay-event="reset">重置密码</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
            </script>


        </div>
    </div>


    <%- include('footer') %>
</div>
<%- include('script') %>

<script>
    var table;
    var vm = new Vue({
        el: '#app',
        data:function() {
            return {
                load:false,
            }
        },
        mounted: function () {
            var self = this;

            layui.use(['element', "table", 'form'], async function () {

                var element = layui.element,
                    table = layui.table,
                    form = layui.form;

                var l = layer.load();

                var v = setInterval(() => {
                    if (self.load) {
                        form.render('select');
                        clearInterval(v);
                        layer.close(l);
                    }
                }, 1000)

                self.getcenters(l, v);

                table.render({
                    elem: "#tablediv",
                    url: "/admin/centeruser",
                    toolbar: '#toolbar',
                    cols: [
                        [
                            {
                                field: "username",
                                title: "员工账号"
                            },
                            {
                                field: "realname",
                                title: "员工姓名"
                            },
                            {
                                field: "phone",
                                title: "联系手机"
                            },
                            {
                                field: "remark",
                                title: "备注"
                            },
                            {
                                field: "money",
                                title: "账上资金"
                            },
                            {
                                field: "center_name",
                                title: "所属中心"
                            },
                            {
                                fixed: 'right',
                                title: '操作',
                                toolbar: '#opdiv',
                                width: 300
                            }
                        ]
                    ],
                    page: true,
                });

                table.on('toolbar(tablediv)', function (obj) {
                    if (obj.event === 'tonew') {
                        layer.open({
                            type: 2,
                            title: false,
                            area: ['1000px', '500px'],
                            anim: 2,
                            content: ['/admin/centeruser/tonew'], //iframe的url，no代表不显示滚动条
                            end: function () { //
                            }
                        });
                    }
                })

                table.on('tool(tablediv)', function (obj) {
                    var data = obj.data;
                    if (obj.event === 'del') {
                        layer.confirm('真的删除行么', function (index) {
                            $.ajax({
                                url: '/admin/centeruser/' + data.id,
                                type: 'Delete',
                                data: {},
                                success: (res) => {
                                    if (res.code === 200) {
                                        layer.close(index);
                                        layer.msg('删除成功！', {icon: 1});
                                        table.reload('tablediv', {
                                            where: {}
                                        });
                                    } else {
                                        layer.msg('删除失败：' + res.error + ' -- ' + res.code, {icon: 2});
                                    }
                                }
                            });
                        });
                    } else if (obj.event === 'edit') {
                        layer.open({
                            type: 2,
                            title: false,
                            area: ['1000px', '600px'],
                            anim: 2,
                            offset: '20px',
                            content: ['/admin/centeruser/toedit?id=' + data.id], //iframe的url，no代表不显示滚动条
                            end: function () { //此处用于演示
                            }
                        });
                    } else if (obj.event === 'view') {
                        layer.open({
                            type: 2,
                            title: false,
                            area: ['1000px', '600px'],
                            anim: 2,
                            offset: '20px',
                            content: ['/admin/centeruser/todetail?id=' + data.id], //iframe的url，no代表不显示滚动条
                            end: function () { //此处用于演示
                            }
                        });
                    } else if (obj.event === 'reset') {
                        layer.confirm('确定重置此账号密码么', function (index) {
                            $.ajax({
                                url:'/admin/centeruser/'+data.id+'/edit',
                                type:'GET',
                                data:{
                                    password:'123456'
                                },
                                success:(res)=>{
                                    if(res.code === 200){
                                        layer.close(index);
                                        layer.msg('密码已重置！新密码：123456',{icon:1})
                                    }else{
                                        layer.msg('重置失败：'+res.error+' -- '+res.code,{icon:2});
                                    }
                                }
                            });
                        });
                    }
                });
                //查询按钮
                form.on('submit(search)', function (data) {
                    table.reload('tablediv', {
                        where: { //设定异步数据接口的额外参数，任意设
                            search: data.field.search,
                            center: data.field.center
                            //…
                        },
                        page: {
                            curr: 1 //重新从第 1 页开始
                        }
                    });
                    return false;
                });
                //查询按钮
                form.on('select(center)', function (data) {
                    var search = $("#search").val();
                    table.reload('tablediv', {
                        where: { //设定异步数据接口的额外参数，任意设
                            center: data.value,
                            search: search
                            //…
                        },
                        page: {
                            curr: 1 //重新从第 1 页开始
                        }
                    });
                    return false;
                });

            })
        },
        methods: {
            iframeclose: function () {
            },
            iframesave: function () {
                table.reload('tablediv', {
                    where: { //设定异步数据接口的额外参数，任意设
                    },
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                });
            },
            iframeupdate: function () {
                table.reload('tablediv', {
                });
            },
            getcenters: function(load,v){
                let self = this;
                $.ajax({
                    url:'/admin/center',
                    type:'GET',
                    data:{isPage:false},
                    success:(res)=>{
                        if(res.code == 0){
                            var data = res.data;
                            if(data){
                                data.forEach((item)=>{
                                    $('#center').append(`<option value="${item.id}">${item.name}</option>`);
                                })
                            }
                            self.load = true;
                        }else{
                            clearInterval(v);
                            layer.close(load);
                            layer.msg('获取中心数据失败：'+res.error+' -- '+res.code,{icon:2})
                        }
                    },
                    fail:(res)=>{
                        clearInterval(v);
                        layer.close(load);
                        layer.msg('获取中心数据失败!  原因：请求发起失败',{icon:2})
                    }
                });
            }
        }
    })
</script>
</body>

</html>
